<script setup lang="ts">
import {computed, ComputedRef, Ref, ref} from 'vue'
import {
  Expand,
  Fold,
  Coin,
} from '@element-plus/icons-vue'
import Logo from "./Logo.vue";
import {RouteRecordRaw} from "vue-router";
import {routes} from "../../../../router";


const isCollapse: Ref<Boolean> = ref(false);

const showLogo: Ref<Boolean> = ref(false);

const menuItemList: ComputedRef<RouteRecordRaw[]> = computed(() => {
  const list: RouteRecordRaw[] = routes.filter((item: RouteRecordRaw) => item.meta && item.meta.title);
  list.forEach((item: RouteRecordRaw) => {
    if (item.children && item.children.length > 0) {
      const children: RouteRecordRaw[] = [];
      item.children.forEach((child: RouteRecordRaw) => {
        if (child.meta && child.meta.title) {
          child.path = item.path + '/' + child.path;
          children.push(child);
        }
      });
      item.children = children;
    }
  });
  return list;
});
</script>

<template>
  <div class="sidebar-container">
    <div class="collapse-container">
      <el-icon class="collapse-icon" @click="() => { isCollapse = !isCollapse }" color="#fff">
        <expand v-if="isCollapse"/>
        <fold v-else/>
      </el-icon>
      <transition name="sidebar-logo-fade" v-if="showLogo">
        <logo :collapse="isCollapse" v-if="!isCollapse"/>
      </transition>
    </div>
    <el-menu
        :default-active="menuItemList[0].children ? menuItemList[0].children[0].path : menuItemList[0].path"
        class="menu-vertical"
        :collapse="isCollapse"
        text-color="#fff"
        active-text-color="#ffd04b"
        background-color="#545c64"
        :router="true"
    >
        <el-sub-menu v-for="item in menuItemList" :index="item.path">
          <template #title>
            <el-icon><coin /></el-icon>
            <span style="width: 120px; text-align: start; margin-left: 5px;">{{ item.meta!.title }}</span>
          </template>
          <el-menu-item v-if="item.children && item.children.length != 0" v-for="child in item.children" :key="child.path" :index="child.path">
            <template #title>
              <span style="margin-left: 20px;">{{ child.meta!.title }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
    </el-menu>
  </div>
</template>

<style scoped lang="scss">
.sidebar-logo-fade-enter-active {
  transition: opacity 1.5s;
}

.sidebar-logo-fade-enter,
.sidebar-logo-fade-leave-to {
  opacity: 0;
}

.sidebar-container {
  height: 100%;
}

.collapse-container {
  padding: 20px 20px 10px 20px;
  display: flex;
  flex-direction: row;
  background-color: #545c64;
  height: 26px;

  .collapse-icon {
    padding: 5px;
  }
}

.menu-vertical {
  min-width: 100%;
  height: calc(100% - 56px);
  border-radius: 0;
  border: 0;
}
</style>